// react 提供的  Hooks 方法
import React, { useEffect, useState } from "react";
import { Layout, Card, Table, Row, Button } from "antd";
import axios from "axios";

import "./index.scss";

// 函数式组件
const User = () => {
    // 声明一个组件内的响应式数据
    const [data, setData] = useState([]);

    /**
     * 相当于 class 组件中的 componentDidMount 生命周期函数
     */
    useEffect(() => {
        axios.get("/users").then((res) => {
            console.log(res.data);
            setData(res.data);
        });
    }, []);

    // 表格列配置
    const columns = [
        {
            title: "ID",
            dataIndex: "id",
        },
        {
            title: "用户姓名",
            dataIndex: "name",
        },
        {
            title: "邮箱",
            dataIndex: "email",
        },
        {
            title: "手机号",
            dataIndex: "mobile",
        },
        {
            title: "创建时间",
            dataIndex: "create_time",
            render: (text, record) => new Date(text).toLocaleTimeString(),
        },
    ];

    const onAddUserClicked = () => {
        console.log(12321);
    };

    // 表格的数据
    return (
        <div className="user">
            <Layout>
                <Layout.Header>头部</Layout.Header>
                <Layout.Content>
                    <Row style={{ marginBottom: "15px" }} justify="end">
                        <Button type="primary" onClick={onAddUserClicked}>
                            添加用户
                        </Button>
                    </Row>
                    <Card>
                        <Table
                            columns={columns}
                            dataSource={data}
                            rowKey={(record) => record.id}
                        />
                    </Card>
                </Layout.Content>
                <Layout.Footer>底部</Layout.Footer>
            </Layout>
        </div>
    );
};

export default User;
